<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
    <title>promise改造回调地狱</title>
    <script src="./1-回调地狱/jquery.js"></script>
</head>



<body>
    <script>
        // 嵌套层数减少了
        new Promise((resolve, reject) => {
            $.ajax({
                // 发送请求类型
                type: "GET",
                url: './1-回调地狱/data1.json',
                success: function (res) {
                    // 修改Promise状态为成功, 修改Promise的结果res
                    resolve(res)
                },
                error: function (res) {
                    // 修改Promise的状态为失败,修改Promise的结果res
                    reject(res)
                }
            })
        }).then((data) => {
            const { id } = data
            return new Promise((resolve, reject) => {
                $.ajax({
                    // 发送请求类型
                    type: "GET",
                    url: './1-回调地狱/data2.json',
                    data: { id },
                    success: function (res) {
                        // 修改Promise状态为成功, 修改Promise的结果res
                        resolve(res)
                    },
                    error: function (res) {
                        // 修改Promise的状态为失败,修改Promise的结果res
                        reject(res)
                    }
                })
            })

        }).then((data) => {
            // console.log(data)
            const userName = { data }
            return new Promise((resolve, reject) => {
                $.ajax({
                    // 发送请求类型
                    type: "GET",
                    url: './1-回调地狱/data3.json',
                    data: { userName },
                    success: function (res) {
                      console.log(res)
                    },
                    error: function (res) {
                        // 修改Promise的状态为失败,修改Promise的结果res
                      console.log(res)
                    }
                })
            })
        })

    </script>
</body>

</html>